---
title: コア機能
icon: Cpu
---

import RibbonStyle from '@/components/ribbon-style'

<MetaData
  lang="ja-JP"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-core',
      locale: '@univerjs/preset-sheets-core/locales/en-US',
      style: '@univerjs/preset-sheets-core/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/core',
    }, {
      client: '@univerjs/engine-formula',
    }, {
      client: '@univerjs/engine-render',
    }, {
      client: '@univerjs/design',
      locale: '@univerjs/design/locale/en-US',
      style: '@univerjs/design/lib/index.css',
    }, {
      client: '@univerjs/ui',
      locale: '@univerjs/ui/locale/en-US',
      style: '@univerjs/ui/lib/index.css',
    }, {
      client: '@univerjs/sheets',
    }, {
      client: '@univerjs/sheets-ui',
      locale: '@univerjs/sheets-ui/locale/en-US',
      style: '@univerjs/sheets-ui/lib/index.css',
      facade: '@univerjs/sheets-ui/facade',
    }, {
      client: '@univerjs/sheets',
      locale: '@univerjs/sheets/locale/en-US',
      facade: '@univerjs/sheets/facade',
    }, {
      client: '@univerjs/sheets-ui',
      locale: '@univerjs/sheets-ui/locale/en-US',
      style: '@univerjs/sheets-ui/lib/index.css',
      facade: '@univerjs/sheets-ui/facade',
    }, {
      client: '@univerjs/sheets-formula',
      facade: '@univerjs/sheets-formula/facade',
    }, {
      client: '@univerjs/sheets-formula-ui',
      locale: '@univerjs/sheets-formula-ui/locale/en-US',
      style: '@univerjs/sheets-formula-ui/lib/index.css',
    }, {
      client: '@univerjs/sheets-numfmt',
      facade: '@univerjs/sheets-numfmt/facade',
    }, {
      client: '@univerjs/sheets-numfmt-ui',
      locale: '@univerjs/sheets-numfmt-ui/locale/en-US',
      style: '@univerjs/sheets-numfmt-ui/lib/index.css',
    }],
    server: 'No',
  }}
/>

Univer Sheets のコア機能は、スプレッドシートエディタ、数式エンジン、レンダリングエンジン、数値書式エンジン、デザインシステム、UI コンポーネントライブラリで構成されます。これらが統合されることで、多様な形式と複雑な操作を扱える強力なプラットフォームを形成します。

## 機能一覧

Univer Sheets のコア機能には以下が含まれます:

- **スプレッドシート描画**: Univer Sheets のレンダリング（カーソル・選択範囲描画を含む）をサポート。
- **セルスタイル**: フォント、色、罫線、配置などセルの装飾設定。
- **数式計算**: 数式の追加と評価をサポート。数学、統計、テキスト、日付関数など Excel のほぼすべての関数を網羅。
- **数値書式**: 通貨、パーセンテージ、日付などの書式設定をサポート。
- **グリッド線と固定表示（フリーズ）**: 大規模データの閲覧・編集を容易にする表示機能。
- **デフォルトスタイル**: 既定フォント・サイズ・カラーなど全体既定スタイルの設定。
- **プラグインシステム**: 数式・画像・チャート等カスタムプラグインをサポート（Univer の中核アーキテクチャ機能の一つ）。

## プリセットモード

### インストール

```package-install
npm install @univerjs/presets @univerjs/preset-sheets-core
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
})

univerAPI.createWorkbook({})
```

### プリセットと設定

#### @univerjs/presets

このプリセットは Univer アプリケーションを生成する `createUniver` メソッドを提供し、**@univerjs/core** および **@univerjs/design** の全メソッドとオブジェクトを公開します。

`createUniver` はテーマ・言語・プリセット等を含む設定オブジェクトを受け取り、`Univer` インスタンス `univer` と Facade API 呼び出し用の `FUniver` インスタンス `univerAPI` を返します。

```typescript
interface CreateUniverParameter {
  // Univer インスタンスのテーマ。既定値: `defaultTheme`
  theme: IStyleSheet
  // ダークモード使用有無。既定: false
  darkMode?: boolean
  // Univer インスタンスのロケール
  locale: LocaleType
  // 使用するロケールオブジェクト。キーがロケール種別、値が対応ロケールオブジェクト
  locales: ILocales
  // ログレベル
  logLevel?: LogLevel
  // 使用するプリセット一覧
  presets: IPresets[]
  // 使用するプラグイン一覧
  plugins: IPlugins[]
}
```

参照：[`createUniver`](/reference/methods/create-univer)

#### @univerjs/preset-sheets-core

このプリセットは Univer Sheets のコアプリセットで、ドキュメント編集・数式エンジン・レンダリングエンジン等に必要な中核機能を含みます。

```typescript
interface IUniverSheetsCorePresetConfig {
  // コンテナ要素（文字列または DOM 要素）
  container?: string | HTMLElement
  // ヘッダー表示有無
  header?: boolean
  // ヘッダーツールバー表示有無
  toolbar?: boolean
  // ヘッダーツールバー種別。default: グループ化モード / simple: 非グループ化モード
  ribbonType?: RibbonType
  // フッター表示設定
  footer?: false | {
    // シートバー（サブシート管理: 追加 / 切替 / 削除）
    sheetBar?: boolean
    // 統計バー（選択範囲の件数・合計・平均等）
    statisticBar?: boolean
    // 下部メニュー（ハイライト・グリッド線等）
    menus?: boolean
    // 下部ズームスライダー
    zoomSlider?: boolean
  }
  // コンテキストメニュー表示有無
  contextMenu?: boolean
  // 自動フォーカス無効化
  disableAutoFocus?: true
  // 依存性注入オーバーライド設定
  override?: DependencyOverride
  // メニュー設定
  menu?: MenuConfig

  // ... 追加の設定項目
}
```

`menu` 設定で特定コマンドの表示／非表示・無効化を簡易制御できます:

```typescript
UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

ここで `'sheet.command.set-range-bold'` と `'sheet.command.set-range-italic'` はコマンド名で、該当メニュー項目を指します。

参照：[@univerjs/preset-sheets-core](/reference/packages/presets/univerjs/preset-sheets-core)

## プラグインモード

### インストール

```package-install
npm install @univerjs/core @univerjs/design @univerjs/engine-render @univerjs/engine-formula @univerjs/ui @univerjs/docs @univerjs/docs-ui @univerjs/sheets @univerjs/sheets-ui @univerjs/sheets-formula @univerjs/sheets-formula-ui @univerjs/sheets-numfmt @univerjs/sheets-numfmt-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverSheetsPlugin } from '@univerjs/docs'
import { UniverSheetsUIPlugin } from '@univerjs/docs-ui'
import SheetsUIEnUS from '@univerjs/docs-ui/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui'
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui'
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US'
import SheetsEnUS from '@univerjs/sheets/locale/en-US'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula-ui/lib/index.css'
import '@univerjs/sheets-numfmt-ui/lib/index.css'

import '@univerjs/engine-formula/facade'
import '@univerjs/ui/facade'
import '@univerjs/docs-ui/facade'
import '@univerjs/sheets/facade'
import '@univerjs/sheets-ui/facade'
import '@univerjs/sheets-formula/facade'
import '@univerjs/sheets-numfmt/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      DesignEnUS,
      UIEnUS,
      SheetsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaUIEnUS,
      SheetsNumfmtUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)
univer.registerPlugin(UniverSheetsFormulaUIPlugin)
univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverSheetsNumfmtUIPlugin)
```

### プラグインと設定

#### @univerjs/core

Univer のコアライブラリで、インスタンス生成・テーマ・言語等の基礎機能を提供します。

```typescript
interface UniverParameter {
  // Univer インスタンスのテーマ。既定値: `defaultTheme`
  theme: IStyleSheet
  // ダークモード使用有無。既定: false
  darkMode?: boolean
  // インスタンスのロケール
  locale: LocaleType
  // 使用するロケールオブジェクト群
  locales: ILocales
  // ログレベル
  logLevel?: LogLevel
}
```

参照：[`Univer`](/reference/classes/univer)

#### @univerjs/engine-render

レンダリングエンジンで、描画・スクロールバー・カーソル・選択範囲等の処理を担当。`UniverRenderEnginePlugin` を提供。

参照：[@univerjs/engine-render](/reference/packages/plugins/univerjs/engine-render)

#### @univerjs/engine-formula

数式エンジンで、数式の計算と処理を担当。`UniverFormulaEnginePlugin` を提供。

参照：[@univerjs/engine-formula](/reference/packages/plugins/univerjs/engine-formula)

#### @univerjs/design

デザインシステムで、全基本コンポーネントとスタイルを提供。

参照：[UI 章](/guides/docs/ui/overview)

#### @univerjs/ui

UI 基盤プラグイン。

`UniverUIPlugin` を提供し、基本レイアウト構成の設定が可能です。

```typescript
interface IUniverUIConfig {
  // コンテナ要素（文字列または DOM）
  container?: string | HTMLElement
  // ヘッダー表示有無
  header?: boolean
  // ヘッダーツールバー表示有無
  toolbar?: boolean
  // ツールバー種別。default: グループ化 / simple: 非グループ化
  ribbonType?: RibbonType
  // コンテキストメニュー表示有無
  contextMenu?: boolean
  // 自動フォーカス無効化
  disableAutoFocus?: true
  // 依存性注入オーバーライド設定
  override?: DependencyOverride
  // メニュー設定
  menu?: MenuConfig
}
```

`menu` 設定例:

```typescript
univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})
```

ここで `'sheet.command.set-range-bold'` と `'sheet.command.set-range-italic'` はコマンド名で、該当メニュー項目を指します。

参照：[@univerjs/ui](/reference/packages/plugins/univerjs/ui)

#### @univerjs/docs

Univer Docs のコアプラグイン。`UniverDocsPlugin` を提供。

参照：[@univerjs/docs](/reference/packages/plugins/univerjs/docs)

#### @univerjs/docs-ui

Univer Docs の UI プラグイン。ドキュメントエディタの UI コンポーネントとインタラクションを提供。`UniverDocsUIPlugin` を提供。

参照：[@univerjs/docs-ui](/reference/packages/plugins/univerjs/docs-ui)

#### @univerjs/sheets

Univer Sheets のコアプラグインで、スプレッドシートエディタの基礎機能を提供。`UniverSheetsPlugin` を提供。

`UniverSheetsPlugin` にはエディタ設定用のオプションがあります:

```typescript
interface IUniverSheetsConfig {
  // 行スタイルと列スタイルが両方設定された場合、行スタイルを優先するか
  isRowStylePrecedeColumnStyle?: boolean
  // 自動行高を結合セルに適用するか
  autoHeightForMergedCells?: boolean
}
```

参照：[@univerjs/sheets](/reference/packages/plugins/univerjs/sheets)

#### @univerjs/sheets-ui

Univer Sheets の UI プラグイン。スプレッドシートエディタ用の UI コンポーネントと操作を提供。`UniverSheetsUIPlugin` を提供。

設定オプション:

```typescript
interface IUniverSheetsUIConfig {
  // フッター表示
  footer?: false | {
    // シートバー（サブシート管理）
    sheetBar?: boolean
    // 統計バー（選択範囲統計: 件数・合計・平均等）
    statisticBar?: boolean
    // 下部メニュー（ハイライト・グリッド線等）
    menus?: boolean
    // ズームスライダー
    zoomSlider?: boolean
  }
  // 数式バー表示
  formulaBar?: boolean
  clipboardConfig?: {
    // 貼り付け後の貼り付けオプションボタンを非表示にするか
    hidePasteOptions?: boolean
  }
  // スクロールバー設定
  scrollConfig?: IScrollBarProps
  // 保護範囲の影表示
  protectedRangeShadow?: boolean
  // 文字列強制扱いアラート無効化
  disableForceStringAlert?: boolean
  // 文字列強制マーク無効化
  disableForceStringMark?: boolean
}
```

参照：[@univerjs/sheets-ui](/reference/packages/plugins/univerjs/sheets-ui)

## ツールバーレイアウトと `RibbonType`

`IUniverSheetsCorePresetConfig` または `IUniverUIConfig` 内の `ribbonType` を設定することでツールバーのレイアウトを変更できます。

`ribbonType` は 2 モードをサポートします: `"default"`（機能でグループ化されたモード）と `"simple"`（非グループ化のフラット表示モード）。

<RibbonStyle />
